<template>
    <div class="swipe-container">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="swopeItem in swipeList" :key="swopeItem.id">
                <img :src="swopeItem.img" :alt="swopeItem.name" />
            </van-swipe-item>
        </van-swipe>
    </div>
    <SearchBar outerBg="#f5f5f5" interBg="#ffffff" :hasBorder="true"></SearchBar>
    <van-grid>
        <van-grid-item v-for="hotcate in hotCategory" :key="hotcate.id" class="item">
            <van-image :src="hotcate.img" />
            <img :src="hotcate.img" alt="">
            <span>{{ hotcate.title }}</span>
        </van-grid-item>
        <van-grid-item icon="more" text="更多" class="item"/>
    </van-grid>
    <van-grid :column-num="2">
        <van-grid-item v-for="filter in filterList" :key="filter.id" class="filter-item">
            <van-image :src="filter.img" />
            <div>
                <h4>{{ filter.name }}</h4>
                <h5>{{ filter.favorites }}收藏 {{ filter.all_click }}浏览</h5>
            </div>
        </van-grid-item>
    </van-grid>
</template>

<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
import SearchBar from '../../components/SearchBar.vue';

onMounted(() => {
    axios.get('http://localhost:9000/list')
        .then(response => {
            filterList.value = response.data.data.splice(0, 10);
            swipeList.value = response.data.data.splice(0, 5);
        })
    axios.get('http://localhost:9000/hotcat')
        .then(response => {
            console.log(response.data);
            hotCategory.value = response.data;
        })
})

const swipeList = ref([]);
const filterList = ref([]);
const hotCategory = ref([]);

</script>

<style lang="scss" scoped>
.swipe-container {
    height: 0;
    font-size: 0;
    padding-bottom: 66.6666667%;
}

.my-swipe .van-swipe-item {
    img {
        width: 100%;
    }
}

.item {
    img {
        width: 60px;
        height: 60px;
        border-radius: 5px;
    }
}

.filter-item {
    ::v-deep .van-image__img {
        display: block;
        border-radius: 5px;
        max-height: 122.66px;
    }

    div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        h4 {
            font-size: 14px;
            margin: 5px;
        }

        h5 {
            font-size: 12px;
            margin: 0;
        }
    }
}
</style>